<template>
	<view class="musicItem" @click="tryPlay">
		<view class="songInfo">
			<text>{{info.song.name}}</text>
			<text
				style="font-size: 0.75em;font-weight: lighter;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{artistStr}}
				- {{info.song.album.name}}</text>
		</view>
		<image mode="widthFix" src="@/static/play.png"></image>
	</view>
</template>

<script setup lang="ts">
	import {
		ref
	} from "vue";
	import baseUrl from '@/config.js'
	const {
		info
	} = defineProps(["info"])

	// console.log(info)

	let artistStr = ref("")
	let a: any = info.song.artists
	let l = a.length
	if (l > 1) {
		for (let i = 0; i < l; i++) {
			artistStr.value = i == l - 1 ? artistStr.value + a[i].name : artistStr.value + a[i].name + ","
		}
	} else artistStr.value = info.song.artists[0].name

	function tryPlay() {
		uni.request({
			url: baseUrl + "/check/music",
			data: {
				id: info.song.id
			},
			success(res: any) {
				if (res.data.success == true) {
					uni.navigateTo({
						url: `/pages/playMusic/playMusic`,
					})
					let playlist = getApp().globalData.playList
					let l = playlist.length
					let index = -1
					for(let i = 0;i<l;i++){
						if(playlist[i].id==info.song.id){
							index = i
							break
						}
					}
					if(index === -1){
						getApp().globalData.playList.unshift({id:info.song.id,name:info.name,artist:artistStr.value})
						getApp().globalData.currentPlayIndex = 0
					}else{
						getApp().globalData.currentPlayIndex = index
					}
				} else {
					uni.showToast({
						title: '暂无权限',
						duration: 2000,
						icon: "none"
					})
				}
			}
		})
	}
</script>

<style lang="less">
	.musicItem {
		padding: 3vw;
		// background-color: rgba(0,0,0,0.1);
		display: flex;
		align-items: center;
		justify-content: space-between;

		.songInfo {
			display: flex;
			flex-direction: column;
			width: 90%;
		}

		.songInfo text:nth-child(1) {
			font-size: 1em;
			font-weight: bold;
			line-height: 5vh;
		}

		image {
			width: 8vw;
		}
	}
</style>
